<template>
  <div id="HeaderAly">
    <!-- header -->
    <div class="headerBox">
      <div class="myHeader">
        <img
          src="@/assets/shi/logo-2.png"
          alt
          class="logoImg"
          @click="$router.push('/')"
        />
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="达人资源库" name="talentLibrary"></el-tab-pane>
          <!-- <el-tab-pane label="智能找达人" name="findTalent"></el-tab-pane> -->
          <!-- <el-tab-pane label="智能找商品" name="three"></el-tab-pane> -->
          <el-tab-pane label="账号诊断" name="diagnosisIndex"></el-tab-pane>
        </el-tabs>
        <!-- <div class="activity_btn" @click="$store.commit('huoDongPopup', true)">
          <img src="/static/huodong_svip.gif" alt="限时超值活动" />
        </div> -->
        <div class="down_app">
          <el-popover placement="bottom" trigger="hover">
            <div class="frame_box">
              <div class="code_img">
                <img src="@/assets/shi/down_ewm.png" alt="" />
              </div>
              <p
                style="
                  text-align: center;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 10px;
                "
              >
                扫码下载APP
              </p>
            </div>

            <div slot="reference" class="down_app_box">
              <img src="@/assets/shi/mobilePhone.png" alt="" />
              <span>下载APP</span>
            </div>
          </el-popover>
        </div>
        <div class="hBtn" @click="$router.push('/talent_main/workbench')">
          <img src="../../../assets/shi/workbench.png" alt />
          返回工作台
        </div>
        <div class="avatar">
          <img
            v-if="photo == ''"
            src="@/assets/meng/touxiang.png"
            class="avatorImg"
          />
          <img v-else :src="photo" class="avatorImg" />
          <div v-if="photo" class="vip_wrap">
            <img
              v-if="person_message && person_message.vipLevel == 0"
              src="@/assets/shi/vip1.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 3"
              src="@/assets/shi/vip2.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 4"
              src="@/assets/shi/vip3.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 1"
              src="@/assets/shi/vip4.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 5"
              src="@/assets/shi/vip4.png"
              alt
            />
            <img
              v-if="person_message && person_message.vipLevel == 2"
              src="@/assets/shi/vip5.png"
              alt
            />
          </div>
          <!-- 个人信息 -->
          <UserInfoPop :person_message="person_message" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfoPop from "@/component/UserInfoPop.vue";
export default {
  name: "HeaderAly",
  components: { UserInfoPop },
  data() {
    return {
      activeName: "talentLibrary",
      photo: "",
      person_message: null,
    };
  },
  computed: {},
  watch: {
    $route(val, old) {
      // 当前路由
      // console.log(val.params.model);
      if (val.params.model == "talentLibrary") {
        this.activeName = "talentLibrary";
      } else if (
        val.params.model == "findTalent" ||
        val.params.model == "budget" ||
        val.params.model == "SearchGoodsAly01" ||
        val.params.model == "MatchResult" ||
        val.params.model == "matchHistory" ||
        val.params.model == "seekTalentDetails" ||
        val.params.model == "talentHome"
      ) {
        this.activeName = "findTalent";
      } else if (
        val.params.model == "diagnosisIndex" ||
        val.params.model == "diagnosisDetails" ||
        val.params.model == "diagnosisHishtory" ||
        val.params.model == "diagnosisResult" ||
        val.params.model == "diagnosisSearch"
      ) {
        this.activeName = "diagnosisIndex";
      } else if (
        val.params.model == "three" ||
        val.params.model == "SearchGoods" ||
        val.params.model == "expertList" ||
        val.params.model == "location" ||
        val.params.model == "historyGoods" ||
        val.params.model == "resultList" ||
        val.params.model == "sample"
      ) {
        this.activeName = "three";
      }
    },
  },
  created() {
    if (this.$route.params.model) {
      if (this.$route.params.model == "talentLibrary") {
        this.activeName = "talentLibrary";
      } else if (
        this.$route.params.model == "findTalent" ||
        this.$route.params.model == "budget" ||
        this.$route.params.model == "SearchGoodsAly01" ||
        this.$route.params.model == "MatchResult" ||
        this.$route.params.model == "matchHistory" ||
        this.$route.params.model == "seekTalentDetails" ||
        this.$route.params.model == "talentHome"
      ) {
        this.activeName = "findTalent";
      } else if (
        this.$route.params.model == "diagnosisIndex" ||
        this.$route.params.model == "diagnosisDetails" ||
        this.$route.params.model == "diagnosisHishtory" ||
        this.$route.params.model == "diagnosisResult" ||
        this.$route.params.model == "diagnosisSearch"
      ) {
        this.activeName = "diagnosisIndex";
      } else if (
        this.$route.params.model == "three" ||
        this.$route.params.model == "SearchGoods" ||
        this.$route.params.model == "expertList" ||
        this.$route.params.model == "location" ||
        this.$route.params.model == "historyGoods" ||
        this.$route.params.model == "resultList" ||
        this.$route.params.model == "sample"
      ) {
        this.activeName = "three";
      }
    }
    if (localStorage.getItem("photo")) {
      this.photo = localStorage.getItem("photo");
    } else {
      this.photo = "";
    }
    this.get_person();
  },
  mounted() {},

  methods: {
    handleClick() {
      // 为了刷新后在当前选择的页
      this.$router
        .push({ path: `/inAnalysis/${this.activeName}` })
        .catch((err) => err);
    },
    get_person() {
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/customer/getperson",
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.person_message = response.data.data;
            this.$store.commit("change_is_vip", response.data.data.vipLevel);
            localStorage.setItem("photo", response.data.data.headImgUrl);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="less" scoped>
#HeaderAly {
  .headerBox {
    width: 100%;
    background-color: #fff;
    .myHeader {
      height: 62px;
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      .logoImg {
        width: 100px;
        cursor: pointer;
      }
      .activity_btn {
        display: flex;
        align-items: center;
        padding-right: 10px;
        box-sizing: border-box;
        cursor: pointer;
        img {
          width: 74px;
          height: 46px;
        }
      }
      .hBtn {
        cursor: pointer;
        min-width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        // background-color: #1879ff;
        border-radius: 4px;
        font-size: 14px;
        color: #fd7f2c;
        img {
          width: 14px;
          height: 14px;
          vertical-align: baseline;
        }
      }
      .avatar:hover {
        > .message {
          display: block !important;
        }
      }
      .avatar {
        display: flex;
        align-items: center;
        position: relative;
        width: 34px;
        height: 100px;
        margin-left: 20px;
        .vip_wrap {
          width: 16px;
          height: 12px;
          position: absolute;
          bottom: 39px;
          right: -5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        > .message {
          z-index: 99;
          .bg01 {
            background-image: url("../../../assets/meng/novip.png");
            .novip {
              background: #414558;
              width: 244px;
              height: 60px;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              padding: 20px 15px 0 15px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              span {
                color: #fff !important;
                font-size: 13px;
                padding-top: 20px;
              }
              > button {
                width: 72px;
                height: 28px;
                line-height: 28px;
                border-radius: 20px;
                background: #fee0c8;
                color: #222;
                margin-top: -4px;
              }
            }
          }
          .bg02 {
            background-image: url("../../../assets/meng/vip.png");
            .vipbox {
              width: 244px;
              height: 60px;
              overflow: hidden;
              background: #414659;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              display: flex;
              justify-content: space-between;
              padding: 0 15px;
              box-sizing: border-box;
              > div {
                > p {
                  padding-top: 14px;
                  span {
                    font-size: 14px;
                    color: #fff !important;
                  }
                }
                > div {
                  font-size: 12px;
                  color: #b3b4bc;
                  display: flex;
                  > p {
                    width: 66px;
                    overflow: hidden;
                    height: 14px;
                  }
                }
              }
              button {
                width: 72px;
                height: 28px;
                line-height: 26px;
                border-radius: 20px;
                background-image: linear-gradient(#feeee0, #fdcda5);
                color: #222;
                margin-top: 16px;
              }
            }
          }
          > div:first-child {
            > p:first-child {
              font-size: 18px;
              color: #222;
              padding-bottom: 18px;
            }
            > p:last-child {
              > span:nth-child(1) {
                font-size: 12px;
                color: #8e9298;
                line-height: 28px;
              }
              > span:nth-child(2) {
                font-size: 12px;
                line-height: 28px;
                color: #434951;
              }
              //   > button:nth-child(3) {
              //     width: 72px;
              //     height: 28px;
              //     border-radius: 4px;
              //     border: solid 1px #555555;
              //     text-align: center;
              //     font-size: 12px;
              //     color: #555555;
              //     line-height: 24px;
              //     background-color: transparent;
              //     float: right;
              //   }
            }
            width: 284px;
            // height: 100px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding-left: 20px;
            padding-top: 26px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          ul {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            li:nth-of-type(1) {
              padding-top: 24px;
            }
            li:last-of-type {
              padding-top: 20px;
              padding-bottom: 20px;
              border-top: 1px solid #e5e5e5;
            }
            li {
              cursor: pointer;
              width: 100%;
              padding: 12px 0;
              padding-left: 18px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #222222;
              img {
                margin-right: 15px;
              }
              .img01 {
                width: 16px;
                height: 16px;
              }
              .img02 {
                width: 16px;
                height: 14px;
              }
              .img03 {
                width: 16px;
                height: 15px;
              }
            }
            li:hover {
              background: #f5f7fa;
            }
          }
          position: absolute;
          top: 81px;
          right: 0px;
          width: 284px;
          background-color: #ffffff;
          box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.3);
          border-radius: 6px;
          box-sizing: border-box;
          display: none;
        }

        > img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          border: 1px solid #e6e6e6;
          cursor: pointer;
        }
      }
      .input_group {
        position: relative;
        display: inline-block;
        //收缩起来的侧边栏
        margin-left: 195px;
        position: relative;
        width: 400px;
        height: 32px;
        border-radius: 2px;
        border: solid 2px #fd7f2c;
        box-sizing: border-box;
        .dropdown {
          position: absolute;
          left: -100px;
          top: -3px;
          .el-button {
            width: 88px;
            height: 34px;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
            .el-icon--right {
              width: 10px;
              height: 10px;
              font-size: 10px;
              color: #555555;
              font-weight: 600;
            }
          }

          .el-button--mini {
            padding: 8px;
            display: block;
            font-size: 14px;
            color: #555;
            line-height: 16px;
          }
          .el-button:hover {
            color: #555;
            border-color: #e5e5e5;
            background-color: transparent;
          }
          // 抖音，快手logo
          .ddlogo {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-top: -2px;
            margin-right: 2px;
          }
        }
        input {
          width: 100%;
          font-size: 14px;
          height: 100%;
          box-sizing: border-box;
          padding-left: 11px;
          padding-right: 38px;
          border: none;
        }
        .input_group-img {
          position: absolute;
          right: -1px;
          cursor: pointer;
          top: -1px;
          text-align: center;
          width: 42px;
          height: 30px;
          background-color: #fd7f2c;
          border-radius: 2px;
          img {
            // margin-top: 6px;
            width: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .down_app {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        text-align: right;
        .down_app_box {
          width: 94px;
          height: 34px;
          line-height: 34px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img {
            width: 13px;
            height: 18px;
          }
          span {
            font-size: 14px;
            font-weight: 600;
            color: #fd7f2c;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
.frame_box {
  box-sizing: border-box;
  .code_img {
    width: 110px;
    height: 110px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
